<%@ page contentType="text/html;charset=UTF-8" %>
<%//@include file="../../common/sessionValidate.jsp" %>
<%//@include file="../../common/taglibs.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html lang="UTF-8">
<head>
    <title>上传文件</title>
    <%//@ include file="meta.jsp"%>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <link rel="stylesheet" href="<%=basePath%>css/my-bootstrap.css" media="screen" id="tuserskin">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
    <script src="<%=basePath%>js/jquery-1.8.3.min.js"></script>
</head>
<body>

<div class="" style="margin-right:2px;padding-right:1px;">
    <div class="panel panel-primary" id="bsDiv1">
        <!-- Default panel head -->
        <div class="panel-heading  ">
            <i class='icon-upload-alt'></i>&nbsp;请选择要上传的文件
        </div>
        <!-- Default panel body -->
        <div class="panel-body" id="bsDiv" class="panel-collapse collapse in">
            <div class="col-xs-8 col-sm-8  col-md-8 col-lg-8">
                <div class="form-group">
                    <label class="control-label col-md-5"></label>
                    <div class="col-md-7">
                        <form id="uploadForm" method="post" enctype="multipart/form-data">
                            <!-- 由于使用了ssm框架，后台接收是用name绑定的，注意name和后台一致 -->
                            <input type="file" id="file1" name="file1"/>
                            <br>
                            <input type="button" onclick="UpladFile()" value="上传"/> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:window.close()"><input type="button" id="buttonqxupload" value="关闭"></a>
                            <input type="hidden" id="returnval" name="returnval" value=""/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="progress" style="width: 100%">
    <div id="progressactive"
         class="progress-bar progress-bar-striped active" role="progressbar"
         aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
         style="width: 0%"></div>
</div>
<span id="sr-only" style="align-content:center;"></span>

</body>
</html>

<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-paginator.min.js"></script>
<script src="<%=basePath%>/js/respond.js"></script>
<script src="<%=basePath%>/js/html5.js"></script>
<script src="<%=basePath%>js/my-jquery-curd.js"></script>
<script src="<%= basePath %>js/tableSortTool.js"></script>
<script src="<%= basePath %>js/calendar.js"></script>
<script src="<%=basePath%>js/jquery.uploadify.min.js"></script>

<script type="text/javascript">
    function UpladFile() {
        // 获取页面已有的一个form表单
        var file1 = document.getElementById("file1");
        var filegroup= "<%=request.getParameter("filegroup")%>";
        //alert("file1.value="+file1.value);
        if(null==file1.value || ""==file1.value){
            alert("请选择要上传的文件！");
            return false;
        }
        var formObj = document.getElementById("uploadForm");
        var FileController = "<%=basePath%>file/uploadFileDB?filegroup="+filegroup+"&time=" + Math.random(); // 接收上传文件的后台地址
        //alert(FileController);
        // FormData 对象
        var form = new FormData(formObj);//创建一个form对象
        //var form = new FormData();//创建一个form对象
        //form.append("filegroup","<%=request.getParameter("filegroup")%>");
        //form.append("file1",file1);
        //alert("FormData=" + form.toString());
        // XMLHttpRequest 对象
        var xhr = false;
        try{
            xhr=new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
        }catch(e){
            xhr=ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
        }
        xhr.open("post", FileController, true);//打开连接，(访问类型，地址，是否异步)
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //但是假设是post方法传数据给后台,否则post过去的数据无法被正常接收。
        xhr.onload = function () {//请求完成后执行  里面可用
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                //alert(xhr.responseText);//后台返回的数据
                var responsejson = xhr.responseText;
                //$("#returnval").val(responsejson) ;
                var returnval = JSON.parse( responsejson).info;
                //var appendstr = "<tr><td>"+returnval+"</td></tr>";
                var filenames = returnval.split("|"); //filenames[0] is oldfilename; filenames[1] is newfilename;
                //document.getElementById("returnval").value = returnval;
                var oldfilenames = window.opener.document.getElementById('<%= request.getParameter("oldfilename")%>').value;
                //alert("oldfilenames="+oldfilenames);
                var newfilenames = window.opener.document.getElementById('<%= request.getParameter("newfilename")%>').value;
                //alert("newfilenames="+newfilenames);
                if(oldfilenames!=null&&oldfilenames!=""){
                    window.opener.document.getElementById('<%= request.getParameter("oldfilename")%>').value=  oldfilenames +";"+filenames[0];
                    window.opener.document.getElementById('<%= request.getParameter("newfilename")%>').value= newfilenames +";"+filenames[1];
                    oldfilenames =  oldfilenames +";"+filenames[0];
                    newfilenames =  newfilenames +";"+filenames[1];
                }else{
                    window.opener.document.getElementById('<%= request.getParameter("oldfilename")%>').value=  filenames[0];
                    window.opener.document.getElementById('<%= request.getParameter("newfilename")%>').value=  filenames[1];
                    oldfilenames =  filenames[0];
                    newfilenames =  filenames[1];
                }
                var showmess= oldfilenames.split(";");
                var newfilename= newfilenames.split(";");

                var trtdlist = "";
                for (var i = 0; i < showmess.length; i++ ){
                    //trtdlist = trtdlist +"<tr id='trdiv"+i+"'><td><a href='#' onclick='delfile("+i+")' >"+showmess[i]+"<font color='red'>删除</font></td></tr>";
                    //trtdlist = trtdlist +"<tr id='trdiv"+i+"'><td>"+showmess[i]+"</td></tr>";
                    trtdlist = trtdlist +"<tr><td>" +
                        "<a href='<%=basePath%>download?filename="+newfilename[i]+"'>"+showmess[i]+"</a></td></tr>";
                }
                //alert(trtdlist);
                window.opener.document.getElementById("fileListDiv").innerHTML = trtdlist;

                //以下为非操作父窗口；
                var percentageDiv = document.getElementById("sr-only");//获取展示进度数据对象
                percentageDiv.innerHTML = "上传成功,服务器保存文件名字:" + JSON.parse( responsejson).info;
            } else {
                alert("Request was unsuccessful: " + xhr.status);//状态
                //0	UNSENT (未打开),
                // 1	OPENED  (未发送),
                // 2 HEADERS_RECEIVED (已获取响应头),
                // 3	LOADING (正在下载响应体),
                // 4	DONE (请求完成)
            }
        };

        xhr.upload.addEventListener("progress", progressFunction, false);//添加上传监听器方法
        xhr.send(form);//发送请求
    }

    function progressFunction(evt) {
        var progressBar = document.getElementById("progressactive");//获取进度条对象
        var percentageDiv = document.getElementById("sr-only");//获取展示进度数据对象
        if (evt.lengthComputable) {
            var max = evt.total;//文件总大小
            var loaded = evt.loaded;//已上传文件大小
            console.log(max);
            progressBar.style.width = Math.round(loaded / max * 100) + "%";
            percentageDiv.innerHTML = Math.round(loaded / max * 100) + "%";
            if (evt.loaded == evt.total) {
                percentageDiv.innerHTML = "正在处理中！";
            }
        }
    }
</script>
